import { Button, Table } from "antd"
import HomePage_ModalComponent_HeaderNormalComponent from "../headerNormal"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_NormalFooterComponent from "../normalFooter"
import { Fragment, useEffect, useState } from "react"
import { $eventBus } from "../../../../../../common/utils"

// 主页-弹窗组件-查看主变或线路弹窗组件
interface HomePageModalComponentSeeMainTransformerOrLineModalComponentInterface {
    isReview?: boolean
    sourceData: object
    change_edit?: Function
    change_cancel: Function

}
const HomePage_ModalComponent_SeeMainTransformerOrLineModalComponent: React.FC<HomePageModalComponentSeeMainTransformerOrLineModalComponentInterface> = (props) => {
    let [tableSourceList, setTableSourceList] = useState<Array<object>>([])
    const baseInfoList = props.sourceData["type"] === "主变" ?[
        {
            label: "监测主变",
            key: "monitorMainName",
            width: "100%",
        },
        {
            label: "巡维中心",
            key: "maintainCentre",
        },
        {
            label: "安装站点",
            key: "stationName",
        },
        {
            label: "生产厂家",
            key: "factory",
        },
        {
            label: "内部磁路系统结构",
            key: "systemStructure",
        },
        {
            label: "使用年限",
            key: "useLife",
            unit: "年"
        },
        {
            label: "监测装置",
            key: "monitorDevice",
        },
        {
            label: "通信地址",
            key: "mailingAddress",
        },
    ] :[
        {
            label: "监测线路",
            key: "line",
        },
        {
            label: "长度",
            key: "length",
        },
        {
            label: "接地方式",
            key: "groundMethod",
        },
        {
            label: "通信地址",
            key: "mailingAddress",
        },
        {
            label: "监测装置",
            key: "monitorDevice",
        },
        {
            label: "线路型号",
            key: "monitorDevice",
        },
        {
            label: "建设日期",
            key: "buildDateName",
        },
        {
            label: "直连站点",
            key: "connecSiteName",
        },
    ]

    const tableList = [
        {
            title: "监测预警值",
            columnList: [
                {
                    title: '指标',
                    dataIndex: 'name',
                    width: 260,
                },
                {
                    title: '一级',
                    dataIndex: 'one',
                    align: "right",
                    render: (text: string, record: object) => <span style={{ color: record["editField"].includes(`${record["parentKey"]}.one`) ? "#D54941" : "rgba(0, 0, 0, 0.85)" }}>{text}</span>,
                },
                {
                    title: '二级',
                    dataIndex: 'two',
                    align: "right",
                    render: (text: string, record: object) => <span style={{ color: record["editField"].includes(`${record["parentKey"]}.two`) ? "#D54941" : "rgba(0, 0, 0, 0.85)" }}>{text}</span>,
                },
            ] as Array<object>
        },
    ]
    const make_tableSourceList = () => {
        tableSourceList = [];
       (props.sourceData["type"] === "主变" ? [{ name: "DC1（A）", key: "dcCur", symbol: "±" }, { name: "AC（A）", key: "acCur" }, { name: "VA（mm/s）", key: "transVibrate" }, { name: "NI（dB）", key: "transNoise" }, { name: "EP1（V）", key: "surfacePotential" }]
        : [{ name: "金属护套电量", key: "sheathCur", symbol: "±" }, { name: "回流线电流（A）", key: "returnCur" }, { name: "架空接地线电流（A）", key: "transVibrate" },]
       ).forEach((item: object) => {
            tableSourceList.push(
                {
                    name: item["name"],
                    one: props.sourceData[item["key"]]?.["one"] && `${item["symbol"] ?? ""}${props.sourceData[item["key"]]?.["one"]}`,
                    two: props.sourceData[item["key"]]?.["two"] && `${item["symbol"] ?? ""}${props.sourceData[item["key"]]?.["two"]}`,
                    editField: props.sourceData["editField"] ?? [],
                    parentKey: item["key"]
                }
            )
        })
        setTableSourceList([...tableSourceList])
    }
    const change_cancel = () => {
        props.change_cancel()
    }
    const eventBus_on = () => {
        $eventBus.on("submitOperation", (res) => {
            props.change_cancel()
            props.change_edit?.(true)
        })
    }

    const eventBus_off = () => {
        $eventBus.removeAllListeners("submitOperation")
    }

    useEffect(() => {
        make_tableSourceList()
    }, [props.sourceData])
    useEffect(() => {
        eventBus_on()
        return () => {
            eventBus_off()
        }
    }, [])
    return (
        <div className={lessModule["HomePageModalComponentSeeMainTransformerOrLineModalComponent"]}>
            {
                !props.isReview && <HomePage_ModalComponent_HeaderNormalComponent name={`${props.sourceData["type"]}详情`} padding="15px 24px" change_cancel={props.change_cancel} />
            }
            <main className={lessModule["HomePageModalComponentSeeMainTransformerOrLineModalComponent-main"]}>
                <div className={lessModule["HomePageModalComponentSeeMainTransformerOrLineModalComponent-main__baseInfo"]}>
                    {
                       baseInfoList.filter((item) => !item["type"] || item["type"] === props.sourceData["type"]).map((item, idx) => (
                            <div key={`baseInfoItem${idx}`} className={lessModule["main-baseInfo__group"]} style={{ width: item["width"] ?? "50%" }}>
                                <span style={{ color: props.sourceData["editField"]?.includes(item["key"]) ? '#D54941' : 'rgba(0, 0, 0, 0.45)' }}>{item["label"]}：</span>
                                <span className={lessModule["baseInfo-group__value"]}>{props.sourceData[item["key"]]} {props.sourceData[item["key"]] && item["unit"]}</span>
                            </div>
                        ))
                    }
                </div>
                {
                    tableList.map((item, idx) => (
                        <Fragment key={`tableItem${idx}`}>
                            <div className={lessModule["HomePageModalComponentSeeMainTransformerOrLineModalComponent-main__title"]}>{item["title"]}</div>
                            <Table rowKey={(record, idx) => "warnning" + idx} columns={item["columnList"]} pagination={false} dataSource={tableSourceList} />
                        </Fragment>
                    ))
                }
            </main>
            {
                !props.isReview && <HomePage_ModalComponent_NormalFooterComponent cancelName="取消" submitName="编辑" change_cancel={change_cancel} />
            }
        </div>
    )
}

export default HomePage_ModalComponent_SeeMainTransformerOrLineModalComponent